<template>
  <div class="panel-title" :style="{ backgroundImage: 'url(' + bg + ')' }">
    <div class="left">
      <div class="title-1">
        <div>
          {{ props.title }}
        </div>
      </div>
      <div class="title-2">{{ props.subTitle }}</div>
    </div>

    <div class="right" v-if="$slots.default">
      <slot></slot>
    </div>
  </div>
</template>

<script setup name="panel-title">
import { ref } from "vue"

import pic1 from "@/assets/images/01/img_title_bg-1.png"
import pic2 from "@/assets/images/01/img_title_bg-2.png"

const props = defineProps({
  /**
   * 主标题
   */
  title: String,
  /**
   * 副标题
   */
  subTitle: String,

  /**
   * 标题背景类型
   * 1 短图片
   * 2 长图片
   */
  bgType: Number
})

const bg = ref(pic1)

if (props.bgType === 2) {
  bg.value = pic2
}
</script>

<style lang="scss" scoped>
.panel-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-left: 1.666667vw;
  height: 2.395833vw;
  line-height: 2.395833vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;

  .left {
    display: flex;
  }

  .right {
    cursor: pointer;
  }
}

.title-1 {
  font-family:
    Alimama ShuHeiTi,
    Alimama ShuHeiTi;
  font-weight: 700;
  font-size: 1.041667vw;

  text-shadow: 0 0 0.416667vw rgba(102, 255, 255, 0.46);
  text-align: left;
  font-style: normal;
  text-transform: none;

  background: linear-gradient(90deg, #ffffff 0%, #6fccff 100%);

  -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
  background-clip: text;
  -webkit-text-fill-color: transparent; /*给文字设置成透明*/
}

.title-2 {
  font-family:
    Alimama ShuHeiTi,
    Alimama ShuHeiTi;
  font-weight: 700;
  font-size: 0.729167vw;
  color: rgba(255, 255, 255, 0.2);
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 0.520833vw;
}
</style>
